<template>
  <div class="container">
    <div class="title">
      <hr class="hr" />
      <div class="title-text">驾校推荐</div>
    </div>
    <div class="content">
      <div class="school" v-for="item in schools" :key="item.name">
        <div class="sch-title">
          <div class="na-st">
            <div class="name">{{ item.name }}</div>
            <div class="stars"><ratingStars :rating="item.stars" /></div>
          </div>
          <div class="desc">
            <li v-for="(desc, i) in item.des" :key="i">
              <div class="des-icon">
                <Icon :type="desc.icon" />
                {{ desc.des }}
              </div>
            </li>
          </div>
        </div>
        <div class="price-submit">
          <div class="price">
            ￥
            {{ item.price }}
          </div>
          <div class="submit">
            <button>学车报名</button>
          </div>
        </div>
        <div class="pic-msg">
          <div class="pic"><img :src="item.pic" alt="" /></div>
          <div class="msg">{{ item.msg }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Icon from "./Icon.vue";
import ratingStars from "./ratingStars.vue";
const schools = [
  {
    name: "龙泉驾校",
    stars: 4,
    price: 3480,
    pic: "https://picsum.photos/id/5/50/50",
    msg: "苦尽甘来，教练服务好!",
    des: [
      { icon: "yes", des: "口碑好" },
      { icon: "yes", des: "规模大" },
      { icon: "yes", des: "拿本快" },
      { icon: "yes", des: "包接送" },
    ],
  },
  {
    name: "公交驾校",
    stars: 4,
    price: 4900,
    pic: "https://picsum.photos/id/6/50/50",
    msg: "特别感谢!",
    des: [
      { icon: "yes", des: "口碑好" },
      { icon: "yes", des: "规模大" },
      { icon: "yes", des: "拿本快" },
      { icon: "yes", des: "包接送" },
    ],
  },
  {
    name: "金陵驾校",
    stars: 4,
    price: 3980,
    pic: "https://picsum.photos/id/7/50/50",
    msg: "。。。。。。。。。",
    des: [
      { icon: "yes", des: "口碑好" },
      { icon: "yes", des: "规模大" },
      { icon: "yes", des: "拿本快" },
      { icon: "yes", des: "包接送" },
    ],
  },
  {
    name: "嘉安驾校",
    stars: 4.5,
    price: 3980,
    pic: "https://picsum.photos/id/7/50/50",
    msg: "教练有耐心",
    des: [
      { icon: "yes", des: "口碑好" },
      { icon: "yes", des: "规模大" },
      { icon: "yes", des: "拿本快" },
      { icon: "yes", des: "包接送" },
    ],
  },
];
</script>

<style scoped>
.container {
  margin-bottom: 100px;
}

.desc {
  display: flex;
}

.desc li {
  margin-right: 8px;
}

.na-st {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.name {
  font-size: 26px;
  margin-right: 10px;
  color: rgb(82, 82, 82);
}

.school {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid rgb(215, 215, 215);
}

.sch-title {
  width: 60%;
  border-right: 1px solid rgb(224, 224, 224);
  margin-right: 10px;
}

.price-submit {
  width: 35%;
  display: flex;
  align-items: center;
}

.submit button {
  margin-left: 5px;
  width: 80px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #c8c8c8;
}

.price {
  font-size: 26px;
  color: red;
  margin-right: 10px;
}

.pic-msg {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  background-color: #ebebeb;
}

.pic-msg .pic {
  margin: 5px 10px 0;
}

.msg {
  font-size: 14px;
  color: gray;
}

.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}

.container {
  margin-top: 100px;
}

.hr {
  width: 90%;
  height: 2px;
  border: none;
  border-top: 1px dotted #e9e9e9;
}

.title {
  text-align: center;
  position: relative;
  width: 100%;
  display: inline-block;
  margin-top: -20px;
  line-height: 41px;
  padding: 0 45px;
  background-color: #fff;
  font-size: 30px;
  margin-bottom: 50px;
}

.title-text {
  width: fit-content;
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

.content {
  margin: 0 auto;
  width: 1200px;
  height: 700px;
}
</style>
